<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css-connect-three</title>
    <style>
        body {
            -webkit-animation: bugfix infinite 1s;
            margin: 0.5em 1em;
        }
        @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } }

        input {
            -webkit-appearance: none;
            display: block;
            float: left;
            border-right: 2px solid #ddd;
            border-bottom: 2px solid #ddd;
            padding: 0px 8px;
            margin: 0;
            font-family: Consolas, "Courier New", monospace;
            font-size: 30pt;
        }

        input:nth-of-type(-n+7) {
            border-top: 2px solid #ddd;
        }

        input:nth-of-type(7n+1) {
            border-left: 2px solid #ddd;
        }

        input:before {
            content: "·";
        }

        input:checked:before {
            content: "○";
        }

        label {
            display: none;
            display: block;
            clear: both;
        }

        p {
            clear: both;
        }

        p:after {
            content: "not_connected";
        }

        /*这下面是你要提交的CSS*/
        input:checked ~ input:checked ~ input:checked ~ p:after {
            content: "connected";
        }
        /*这上面是你要提交的CSS*/
    </style>

</head>
<body>
<input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><label></label>
<input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><label></label>
<input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><label></label>
<input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><label></label>
<input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><label></label>
<input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><label></label>
<input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><label></label>
<p></p>
</body>
</html>